<script setup lang="ts">
import { ref, watch } from "vue"
import { SysPermission } from "@/api/user/type/user"
import { permissionPageApi } from "@/api/user/permission"
import { Edit, Search } from "@element-plus/icons-vue"
import UmCollapse from "@/components/Collapse/index.vue"
import Pagination from "@/components/Pagination/index.vue"

const permissions = ref<SysPermission[]>([] as SysPermission[])
const mode = ref<string>("all")
const total = ref<number>(0)
const collapse = ref<boolean>(false)
const pagination = ref({
  page: 1,
  size: 10
})

const showRole = (role: any) => {
  console.log(role)
}

const initData = (page: number, size: number) => {
  pagination.value.page = page
  pagination.value.size = size

  permissionPageApi({
    page: pagination.value.page,
    size: pagination.value.size,
    mode: mode.value
  }).then((res) => {
    const { code, body } = res
    if (code === 200) {
      permissions.value = body.content
      total.value = body.totalElements
    }
  })
}

const casingInitData = () => {
  initData(pagination.value.page, pagination.value.size)
}

watch(mode, () => casingInitData())

casingInitData()
</script>

<template>
  <div class="per-box">
    <div class="operation">
      <UmCollapse :display="collapse">
        <template #head>
          <el-row>
            <el-button :icon="Search" @click="collapse = !collapse" circle />
          </el-row>
        </template>
        <template #default>
          <el-radio-group v-model="mode">
            <el-radio label="all" value="all">全部</el-radio>
            <el-radio label="notDel" value="notDel">未删除</el-radio>
            <el-radio label="isDel" value="isDel">已删除</el-radio>
          </el-radio-group>
        </template>
      </UmCollapse>
    </div>
    <div class="content">
      <el-table :data="permissions" border>
        <el-table-column type="selection" width="55" />
        <el-table-column prop="spec" label="描述" width="200" fixed />
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="per" label="权限" width="200" />
        <el-table-column prop="url" label="访问url" width="200" />
        <el-table-column prop="method" label="请求方法" width="100" />
        <el-table-column prop="del" label="删除状态" width="100" />
        <el-table-column fixed="right" label="操作" width="60">
          <template v-slot="scope">
            <el-button @click="showRole(scope.row)" type="primary" :icon="Edit" circle />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <Pagination :total="total" @handler="initData" ref="userPageRef" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.per-box {
  background-color: white;
  border-radius: 5px;
  padding-bottom: inherit;

  .content {
    padding: 10px;
    :deep(.el-table) {
      .el-table-fixed-column--right {
        background-color: white;
      }
      .el-table-fixed-column--left {
        background-color: rgb(247, 250, 250);
      }
    }
  }
  .operation {
    padding: 10px;
    :deep(.el-row) {
      justify-content: end;
    }
  }
  .page {
    padding: 0 10px;
  }
}
</style>
